<template>
  <div class="historyhot">
    <!-- 历史记录 -->
    <div class="history" v-if="isShowHistory">
      <div class="hd">
        <h4>历史记录</h4>
        <van-icon size="20" @click="redFn" name="delete" />
      </div>
      <div class="bd">
        <van-tag
          v-for="(item, index) in searchHistoryData"
          @click="goSearch(item)"
          :key="index"
          plain
          type="default"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <!-- 热品推荐 -->
    <div class="historyt">
      <div class="hd">
        <h4>热品推荐</h4>
      </div>
      <div class="bd">
        <van-tag
          v-for="(item, index) in searchHotData "
          :key="index"
          @click="goSearch(item.keyword)"
          plain
          :type="item.is_hot ? 'danger' : 'default'"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>
<script>
import { Clearhistory } from "@/utils/http";
export default {
  name: "historyhot",
  props: ["searchHistoryData", "searchHotData"],
  data() {
    return {
      isShowHistory: true,
    };
  },
  components: {},
  methods: {
    goSearch(m) {
      // console.log(m);
      this.$emit("goSearch",m)
    },
    redFn(item){
      Clearhistory().then(res=>{
        console.log(res);
        if(res.data.errno == 0){
          this.isShowHistory = false
          location.reload();
        }
      })
    }
  },
  created() {
    console.log(this.searchHistoryData);
    console.log(this.searchHotData);
  },
};
</script>
<style lang='less' scoped>
.historyhot {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  .history {
    background-color: #fff;
    padding: 2%;
    .hd {
      padding-top: 2%;
      display: flex;
      justify-content: space-between;
      h4 {
        margin-bottom: 10px;
      }
    }
    .bd {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .van-tag {
        padding: 3px;
        margin: 0 2px;
      }
    }
  }
}
</style>